<template>
    <el-form :model="vxForm" :rules="vxFormRules" :label-width="110">
        <el-form-item label="公众号ID" prop="public_account_id">
            <el-input v-model="vxForm.public_account_id" placeholder="请输入公众号ID"></el-input>
        </el-form-item>
        <el-form-item label="小程序名称" prop="mini_program_name">
            <el-input v-model="vxForm.mini_program_name" placeholder="请输入小程序名称"></el-input>
        </el-form-item>
        <el-form-item label="小程序AppID" prop="mini_program_appid">
            <el-input v-model="vxForm.mini_program_appid" placeholder="请输入小程序AppID"></el-input>
        </el-form-item>
        <el-form-item label="secret" prop="mini_program_secret">
            <el-input v-model="vxForm.mini_program_secret" placeholder="请输入secret"></el-input>
        </el-form-item>
        <el-form-item label="商户号" prop="mch_id">
            <el-input v-model="vxForm.mch_id" placeholder="请输入商户号"></el-input>
        </el-form-item>
        <el-form-item label="API 密钥" prop="api_key">
            <el-input v-model="vxForm.api_key" placeholder="请输入API 密钥"></el-input>
        </el-form-item>
        <el-form-item label="商户证书">
            <div class="upload">
                <el-button color="var(--primary-theme-color)" icon="el-icon-plus" size="small" type="primary"
                @click="openFileSelect">点击上传</el-button>
            <div class="min_text">例如：apiclient_cert.pem</div>
            </div>
        </el-form-item>
        <el-form-item label="商户密钥1" >
            <div class="upload">
                <el-button color="var(--primary-theme-color)" icon="el-icon-plus" size="small" type="primary"
                @click="openFileSelect">点击上传</el-button>
            <div class="min_text">例如：apiclient_key.pem</div>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import useElementPlus from "@/hooks/useElementPlus"

const { message } = useElementPlus()

const vxForm = reactive({
    public_account_id: '',
    mini_program_name: '',
    mini_program_appid: '',
    mini_program_secret: '',
    mch_id: '',
    api_key: '',
    cert_client: '',
    cert_key: ''
})

const vxFormRules = reactive({
    public_account_id: [
        { required: true, message: '请输入公众号ID', trigger: 'blur' }
    ],
    mini_program_name: [
        { required: true, message: '请输入小程序名称', trigger: 'blur' }
    ],
    mini_program_appid: [
        { required: true, message: '请输入小程序AppID', trigger: 'blur' }
    ],
    mini_program_secret: [
        { required: true, message: '请输入secret appid', trigger: 'blur' }
    ],
    mch_id: [
        { required: true, message: '请输入商户号', trigger: 'blur' }
    ],
    api_key: [
        { required: true, message: '请输入API 密钥', trigger: 'blur' }
    ],
    cert_client: [
        { required: true, message: '请上传apiclient_cert.pem证书', trigger: 'change' }
    ],
    cert_key: [
        { required: true, message: '请上传apiclient_key.pem证书', trigger: 'change' }
    ]
})

const setVxConfig = () => {
    message({
        message: "微信-配置成功",
        type: "success"
    })
}

const openFileSelect=()=>{
    const file = document.createElement('input')
    file.type = 'file'
    file.click()
}
defineExpose({
    setVxConfig
})
</script>

<style lang="scss" scoped>

.upload{
    display: flex;
    flex-direction: column;
    .min_text{
        font-size: 12px;
        color: grey;
    }
}
</style>